<template>
    <div class="coombo">
           <section class="coombo_title">
               学车套餐
           </section>
           <section class="coombo_items">
                <router-link class="comboitem" tag="div" v-for="(item,index) in comboData" :key="item.id" :to="'/sign/combodetail/' + item.id" >  
                 <!--   <div class="comboitem" v-for="(item,index) in comboData" @click='gotoCombo(index, item.id)' :key="index"> -->
                        <div class="icon">
                            <div class="iconpic"><img :src="item.logo" alt=""/></div>
                        </div>
                        <div class="info" >
                            <div class="title">
                                <div class="name">{{item.name}}</div>
                                <div class="cash">{{item.price}}/元</div>
                            </div>
                            <div class="desc clearfix">
                                <div class="desc_item" v-for="(item,index) in item.label_depict">
                                  {{item}}
                                </div>
                            </div>
                        </div>
                        <div class="goto">
                            <div class="icon">
                                
                            </div>
                        </div>
                   <!--  </div> -->
                </router-link>
           </section>
    </div>
</template>

<script>
   
    export default {
        data() {
            return {
                combo_List:null //banner列表
            }
        },
        methods:{
            gotoCombo(index,id){
                console.log(index+id);
            },
        },
        props:['comboData'],
        created(){  
        },
     

    }

</script>

<style lang="scss" scoped>
    @import 'src/common/styles/mixins';
.router-link-active {
      color: red;
       text-decoration: none;
  }
  .head_gotocity{
    text-decoration: none;
  }
   .coombo{
    background: #f0f0f0;
    padding: px2rem(15) px2rem(20);
       .coombo_title{
        background: #ffffff;
        font-size: px2rem(28);
        color: #666666;
        padding: px2rem(15) px2rem(30);
      }
   }
    .comboitem{
            border-top:px2rem(2) solid #e9e9e9;
            padding:px2rem(42) px2rem(35);
            background: #fff;
          @extend %flexbox;
            .icon{
                width: px2rem(75);
                img{
                    width: 100%;
                }
            }
            .info{
                padding-left:px2rem(35);
                .title{
                    font-size: px2rem(36);
                    @extend %flexbox;
                    .name{
                        color:#333;
                    }
                    .cash{ 
                        line-height:px2rem(36);
                        background:#fa5800;
                        color:#fff;
                        padding:0 px2rem(5);
                        margin-left:px2rem(20);
                        border-radius:px2rem(8);  
                    }
                }
                .desc{
                    font-size: px2rem(22);
                    color:#999;
                    padding-top:px2rem(30);
                    line-height: 1.5;
                    .desc_item{
                        float: left;
                        width: 42%;
                        padding-top:px2rem(10);
                    }
                }

          }
    .goto{ @extend %box-center;
            .icon{
                width:px2rem(36);
                height: px2rem(60);
                background: url('./images/goto.png') no-repeat;
                background-size:100%;
            }
        }
 }



</style>
